<template>
  <div class="appo_page">
    <tab :line-width="3.5" custom-bar-width="1.88rem" active-color="#131A2A" bar-active-color="#448EFF"
         default-color="#9CA6BA">
      <tab-item :selected="tabItemShow == 0" @on-item-click="tabItemClick">按日期</tab-item>
      <tab-item :selected="tabItemShow == 1" @on-item-click="tabItemClick">按医生</tab-item>
    </tab>
    <div v-if="tabItemShow == 0">
      <div class="appo_date">
        <!--        <div class="item" v-for="(item, index) in dateList"-->
        <!--          :class="{ noclick: item.hasReg == 0, active: idx == item.regDate }" v-if="index < 60 && index >= 0"-->
        <!--          @click="item.hasReg != 0 ? selectFun(item) : ''">-->

        <div class="item" v-for="(item, index) in dateList"
             :class="{ noclick: item.hasReg == 0, active: idx == item.regDate }" v-if="index < 60 && index >= 0"
             @click="selectFun(item)">

          <div>{{ item.regDate | substring }}</div>
          <div>周{{ item.weekDay | NoToChinese }}</div>
        </div>
      </div>
      <!-- <div class="switch_page">
        <div>是否仅显示可约医生</div>
        <x-switch title="" v-model="canShow1"></x-switch>
      </div> -->
      <div class="date_page">
        <template v-if="canShow1">
          <div class="doctor_item" v-for="item in doctorList" :style="{
            opacity: item.totalCount > 0 ? '1' : '0.4',
          }" @click="item.totalCount > 0 ? goAppointmentTime(item, 1) : ''">
            <div class="doctor_item_left">
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01"
                   alt="" v-if="item.sex == '1'"/>
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02"
                   alt="" v-else/>
            </div>
            <div class="doctor_item_right">
              <div class="doctor_item_right_1">
                {{ item.name }} &nbsp;&nbsp;<span v-if="item.team">{{ item.team }}</span>&nbsp;&nbsp;<span
                v-if="item.isFamous=='1'">著名专家号源</span>
              </div>
              <div class="doctor_item_right_2">
                {{ item.jobTitle }}
              </div>
              <div class="doctor_item_right_3" v-if="item.memo.length > 0">
                <span v-for="i in item.memo">
                  {{ i }}
                </span>
              </div>
              <div class="doctor_item_right_4"
                   v-if="item.hasOwnProperty('treatFeeMax') && (item.treatFeeMax>0 || isToday)">
                <div class="fee">
                  <span>¥{{
                      (item.treatFeeMax / 100).toFixed(2)
                    }}</span>
                </div>
                <div class="num">余号: <span>{{ item.totalCount }}</span></div>
              </div>
              <div class="doctor_item_right_4" v-else>
                <div class="fee">
                  <span>¥--</span>
                </div>
                <div class="num"><span>当日未出诊</span></div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="doctor_item" v-for="item in doctorList" @click="goAppointmentTime(item, 1)">
            <div class="doctor_item_left">
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01"
                   alt="" v-if="item.sex == '1'"/>
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02"
                   alt="" v-else/>
            </div>
            <div class="doctor_item_right">
              <div class="doctor_item_right_1">
                {{ item.name }} &nbsp;&nbsp;<span v-if="item.team">{{ item.team }}</span>&nbsp;&nbsp;<span
                v-if="item.isFamous=='1'">著名专家号源</span>
              </div>
              <div class="doctor_item_right_2">
                {{ item.jobTitle }}
              </div>
              <div class="doctor_item_right_3" v-if="item.memo.length > 0">
                <span v-for="i in item.memo">
                  {{ i }}
                </span>
              </div>
              <div class="doctor_item_right_4" v-if="item.hasOwnProperty('treatFeeMax') && item.treatFeeMax>=0">
                <div class="fee">
                  <span>¥{{
                      (item.treatFeeMax / 100).toFixed(2)
                    }}</span>
                </div>
                <div class="num">余号: <span>{{ item.totalCount }}</span></div>
              </div>
              <div class="doctor_item_right_4" v-else>
                <div class="fee">
                  <span>¥---</span>
                </div>
                <div class="num"><span>未出诊</span></div>
              </div>

            </div>

          </div>
        </template>
      </div>
    </div>
    <div v-if="tabItemShow == 1">
      <!-- <div class="switch_page">
        <div>是否仅显示可约医生</div>
        <x-switch title="" v-model="canShow2"></x-switch>
      </div> -->
      <div class="doctor_page">
        <template v-if="canShow2">
          <div class="doctor_item" v-for="item in AlldoctorList" :style="{
            opacity: item.totalCount > 0 ? '1' : '0.4',
          }" @click="item.totalCount > 0 ? goAppointmentTime(item, 2) : ''">
            <div class="doctor_item_left">
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01"
                   alt="" v-if="item.sex == '1'"/>
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02"
                   alt="" v-else/>

            </div>
            <div class="doctor_item_right">
              <div class="doctor_item_right_1">
                {{ item.name }} &nbsp;&nbsp;<span v-if="item.team">{{ item.team }}</span>&nbsp;&nbsp;<span
                v-if="item.isFamous=='1'">著名专家号源</span>
              </div>
              <div class="doctor_item_right_2">
                {{ item.jobTitle }}
              </div>
              <div class="doctor_item_right_3" v-if="item.memo.length > 0">
                <span v-for="i in item.memo">
                  {{ i }}
                </span>

              </div>
              <div class="doctor_item_right_4" v-if="item.hasOwnProperty('treatFeeMax') && item.treatFeeMax>=0">
                <div class="fee">
                  <span>¥{{
                      (item.treatFeeMax / 100).toFixed(2)
                    }}</span>
                </div>
                <div class="num">余号: <span>{{ item.totalCount }}</span></div>
              </div>
              <div class="doctor_item_right_4" v-else>
                <div class="fee">
                  <span>¥---</span>
                </div>
                <div class="num"><span>未出诊</span></div>
              </div>

            </div>

          </div>
        </template>
        <template v-else>
          <div class="doctor_item" v-for="item in AlldoctorList" v-if="item.totalCount == 0">
            <div class="doctor_item_left">
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01"
                   alt="" v-if="item.sex == '1'"/>
              <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02"
                   alt="" v-else/>
            </div>
            <div class="doctor_item_right">
              <div class="doctor_item_right_1">
                {{ item.name }} &nbsp;&nbsp;<span v-if="item.team">{{ item.team }}</span>&nbsp;&nbsp;<span
                v-if="item.isFamous=='1'">著名专家号源</span>
              </div>
              <div class="doctor_item_right_2">
                {{ item.jobTitle }}
              </div>
              <div class="doctor_item_right_3" v-if="item.memo.length > 0">
                <span v-for="i in item.memo">
                  {{ i }}
                </span>

              </div>
              <div class="doctor_item_right_4">
                <div class="fee">
                  <!--                  检查费: -->
                  <span>¥{{
                      (item.treatFeeMax / 100).toFixed(2)
                    }}</span>
                </div>
                <div class="num">余号: <span>{{ item.totalCount }}</span></div>

              </div>

            </div>
          </div>
        </template>
      </div>
    </div>
    <popup v-model="show" height="100vh" :hide-on-blur="false" is-transparent>
      <div class="mask_confirm" style="">
        <div class="tit">温馨提示</div>
        <div class="content">
          <!--          <template v-if="deptDetails.deptName == '住院患者核酸'">-->
          <!--            1. 此号源仅供住院患者陪护家属使用， 请再次确认是否预约。<br />-->
          <!--            2.预约挂号后如需退号，请至少在预约日期前一日操作。就诊当日或过期不予退号。-->
          <!--          </template>-->
          <!--          <template v-else>-->
          <div v-html="deptDetails.tips">
          </div>
          <!--          </template>-->
        </div>
        <div class="btn" @click="show = !show">我已阅读并同意</div>
      </div>
    </popup>

  </div>
</template>
<script>
import {getRegDateList, getRegDoctorList, getDeptInfo} from "@/api/api";
import {Tab, TabItem, XSwitch, Popup} from "vux";

export default {
  components: {
    Tab,
    TabItem,
    XSwitch,
    Popup,
  },
  data() {
    return {
      isToday: false,
      selectDate: "",
      tabItemShow: 0,
      deptDetails: {},
      show: false,
      showFamous: false,
      idx: null,
      title: "",
      info: {},
      dateList: [],
      doctorList: [],
      AlldoctorList: [],
      canShow1: true,
      canShow2: true,
      errorImg01: 'this.src="' + require("@/assets/img/img_male.png") + '"',
      errorImg02: 'this.src="' + require("@/assets/img/icon_female.png") + '"',
    };
  },
  created() {
    console.log(this.$route.query);
    if (this.$route.query) {
      this.info = this.$route.query;
      this.getRegInfo();
      this.GetDeptInfo()
      document.title = this.info.deptName;
    }


    // this.show = false;


    if (window.localStorage.getItem("appoIdx")) {
      this.idx = window.localStorage.getItem("appoIdx");
    }
    if (window.localStorage.getItem("appoTabItemShow")) {
      this.tabItemShow = window.localStorage.getItem("appoTabItemShow");
      if (this.tabItemShow == 1) {
        this.GetAllDoctorInfo();
      }
    }
  },
  methods: {
    todayDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取排班日期
    getRegInfo() {
      var data = {
        hosId: "",
        deptId: this.info.deptId,
        doctorId: "",
        isNight: this.info.isNight,
        isToday: this.info.isToday,
        // endDate: "2021-01-21",
        isOnline: this.info.isOnline
      };
      getRegDateList(data).then((res) => {
        if (res.code == 200) {
          this.dateList = res.data;
          var find = res.data.find((item) => item.hasReg != 0);
          console.log(find);
          if (!window.localStorage.getItem("appoIdx")) {
            this.idx = find.regDate;
            console.log(this.idx);
            window.localStorage.setItem("appoIdx", this.idx);
          } else {

          }

          // window.localStorage.setItem("appoRegId", find.regId);
          this.GetDoctorInfo(this.idx);
        }
      });
    },
    GetDeptInfo() {
      const data = {
        deptId: this.info.deptId,
        parentId: "",
        level: "1",
        isOnline: this.info.isOnline
      };
      getDeptInfo(data).then((res) => {
        if (res.code == 200) {
          var item = res.data
          var reg = new RegExp("\n", "g")
          item.tips = item.tips.replace(reg, "<br>")
          console.log('tip', item)
          this.deptDetails = item
          if (item.tips) {
            this.show = true;
          }
        }
      });
    },
    //获取当天医生列表
    GetDoctorInfo(date) {
      this.selectDate = date;
      if (date === this.todayDate()) {
        this.isToday = true;
      } else {
        this.isToday = false;
      }
      const that = this;
      var data = {
        deptId: that.info.deptId,
        hosId: "",
        regDate: date,
        isDept: 1,
        isNight: this.info.isNight,
        isToday: this.info.isToday,
        isOnline: this.info.isOnline
      };
      getRegDoctorList(data).then((res) => {
        if (res.code == 200) {
          // that.doctorList = res.data;
          var resData = res.data
          resData.forEach(element => {
            if (element.memo) {
              element.memo = element.memo.split("|")
            } else {
              element.memo = []
            }
          });
          that.doctorList = resData
        }
      });
    },
    // 获取科室医生列表
    GetAllDoctorInfo() {
      var data = {
        deptId: this.info.deptId,
        hosId: "",
        regDate: "",
        isNight: this.info.isNight,
        isToday: this.info.isToday,
        isOnline: this.info.isOnline
      };
      getRegDoctorList(data).then((res) => {
        if (res.code == 200) {
          // this.AlldoctorList = res.data;
          var resData = res.data
          resData.forEach(element => {
            if (element.memo) {
              element.memo = element.memo.split("|")
            } else {
              element.memo = []
            }

          });
          this.AlldoctorList = resData
        }
      });
    },

    tabItemClick(e) {
      this.tabItemShow = e;
      if (e == 1) {
        this.GetAllDoctorInfo();
      }
    },
    selectFun(item) {
      this.idx = item.regDate;
      window.localStorage.setItem("appoIdx", this.idx);
      this.GetDoctorInfo(item.regDate);
    },
    goAppointmentTime(item, type) {
      window.localStorage.setItem("appoTabItemShow", this.tabItemShow);
      if (type == 2) {
        window.localStorage.removeItem("appoIdx")
      }
      item.isOnline = this.info.isOnline
      item.isNight = this.info.isNight
      item.isToday = this.info.isToday
      this.$router.push({
        path: "/doctor_details",
        query: item,
      });
    },
  },
  filters: {
    brFun(value) {
      var reg = new RegExp("\n", "g")
      var str = value.replace(reg, "<br>");
      return str
    },
    joint(min, max) {
      var str = "";
      if (min == max) {
        str = "¥" + parseInt(min) / 100;
      } else {
        str = "¥" + parseInt(min) / 100 + "-" + "¥" + parseInt(max) / 100;
      }
      return str;
    },
    getWeek(dateString) {
      var dateArray = dateString.split("-");
      var date = new Date(
        dateArray[0],
        parseInt(dateArray[1] - 1),
        dateArray[2]
      );
      return "周" + "日一二三四五六".charAt(date.getDay());
    },
    substring(str) {
      var string = str.substring(str.length - 5);
      return string;
    },
    NoToChinese(num) {
      if (!/^\d*(\.\d*)?$/.test(num)) {
        alert("Number is wrong!");
        return "Number is wrong!";
      }
      var AA = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "日",
        "八",
        "九"
      );
      var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
      var a = ("" + num).replace(/(^0*)/g, "").split("."),
        k = 0,
        re = "";
      for (var i = a[0].length - 1; i >= 0; i--) {
        switch (k) {
          case 0:
            re = BB[7] + re;
            break;
          case 4:
            if (
              !new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0])
            )
              re = BB[4] + re;
            break;
          case 8:
            re = BB[5] + re;
            BB[7] = BB[5];
            k = 0;
            break;
        }
        if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
          re = AA[0] + re;
        if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
        k++;
      }
      if (a.length > 1) {
        //加上小数部分(如果有小数部分)
        re += BB[6];
        for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
      }
      return re;
    },

    memoTo(value) {
      var str = value.replaceAll("|", " | ")
      return str
    },

  },
};
</script>
<style scoped>
.appo_page {
  height: 100vh;
}

.switch_page {
  padding: 0 1rem;
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date_page {
  height: calc(100vh - 6.75rem);
  overflow-y: auto;
}

.doctor_page {
  height: calc(100vh - 2.75rem);
  overflow-y: auto;
}

.appo_date {
  overflow-x: scroll;
  white-space: nowrap;
}

.appo_date .item {
  width: 3rem;
  height: 2.625rem;
  background-color: #fff;
  border-radius: 0.25rem;
  /* display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column; */
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.25rem;
  display: inline-block;
  text-align: center;
  padding: 0.6875rem 0;
}

.noclick {
  color: #9ca6b9;
}

.active {
  background-color: rgba(90, 173, 251, 1) !important;
  color: #fff;
}

.doctor_item {
  width: calc(100% - 3.625rem);
  margin: 0.75rem 1rem;
  padding: 0.75rem 0.8125rem;
  font-size: 0.875rem;
  box-shadow: 0.00rem 0.00rem 0.9375rem 0.00rem rgba(174, 206, 254, 0.3);
  border-radius: 0.375rem;
  background-color: #fff;
  position: relative;
  display: flex;

}

.doctor_item .doctor_item_left {
  width: 4.25rem;
  margin-right: 0.625rem;


}

.doctor_item .doctor_item_left > img {
  width: 4.25rem;
  height: 4.25rem;
  margin-right: 0.625rem;
}


.doctor_item .doctor_item_right {
  width: calc(100% - 5rem);
  font-size: 0.8125rem;
}

.doctor_item .doctor_item_right .doctor_item_right_1 {
  line-height: 1.625rem;
  height: 1.625rem;
  font-size: 1.00rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #131A2A;
  display: flex;
  align-items: center;

}

.doctor_item .doctor_item_right .doctor_item_right_1 span {
  display: inline-block;
  padding: 0 0.44rem;
  height: 1.1875rem;
  line-height: 1.1875rem;
  background: rgba(255, 202, 127, 0.25);
  border-radius: 0.19rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FF9C32;
  margin-left: 0.625rem;
}

.doctor_item .doctor_item_right .doctor_item_right_2 {
  line-height: 1.5rem;
  height: 1.5rem;

}

.doctor_item .doctor_item_right .doctor_item_right_3 {
  line-height: 1.5rem;
  height: 1.5rem;


}

.doctor_item .doctor_item_right .doctor_item_right_3 span {
  display: inline-block;
  padding: 0.00rem 0.375rem;
  height: 1.19rem;
  line-height: 1.1875rem;
  background: rgba(68, 142, 255, .1);
  border-radius: 0.19rem;
  font-size: 0.75rem;
  color: #448EFF;
  margin-right: 0.75rem;
}

.doctor_item .doctor_item_right .doctor_item_right_4 {
  line-height: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.doctor_item .doctor_item_right .doctor_item_right_4 .fee span {
  color: #FE4336;
  font-size: 0.875rem;
}

.doctor_item .doctor_item_right .doctor_item_right_4 .num span {
  color: #448EFF;
  font-size: 0.875rem;
}

.mask_confirm {
  width: 90%;
  background-color: #fff;
  height: 70%;
  margin: 0 auto;
  border-radius: 0.31rem;
  position: fixed;
  left: 5%;
  top: 10%;
  /* position: relative; */
}

.mask_confirm .tit {
  height: 2.81rem;
  line-height: 2.81rem;
  text-align: center;
  border-bottom: 0.06rem solid #e7ecf5;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #448eff;
}

.mask_confirm .content {
  padding: 0.00rem 1.00rem;
  margin: 1.25rem 0;
  height: 66%;
  overflow-y: auto;
  line-height: 1.5rem;
}

.mask_confirm .btn {
  position: absolute;
  bottom: 0.94rem;
  left: calc((100% - 10.13rem) / 2);
  width: 10.13rem;
  height: 2.75rem;
  text-align: center;
  line-height: 2.75rem;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 0.19rem;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
</style>
<style>
.appo_page .vux-tab {
  /* background-color: #f7fafd !important; */
}

.vux-tab .vux-tab-item {
  font-size: 1.06rem !important;
}

.vux-tab .vux-tab-item.vux-tab-selected {
  font-weight: bold;
}
</style>
